<template>
	<view class="">
		<!-- 顶部导航 -->
		<fa-navbar title="搜索"></fa-navbar>
		<view class="u-p-30 u-bg-white"><u-search placeholder="搜索问题或文章" v-model="keyword" :show-action="showAction" @search="search" @custom="search"></u-search></view>
		<!-- #ifdef MP-BAIDU -->
		<view class="" v-if="list.length > 0 && theme.bgColor">
			<fa-u-tabs :list="list" :is-scroll="false" :active-color="theme.bgColor" :current="tIndex" @change="tChang"></fa-u-tabs>
		</view>
		<!-- #endif -->
		<!-- #ifndef MP-BAIDU -->
		<u-tabs :list="list" :is-scroll="false" :active-color="theme.bgColor" :current="tIndex" @change="tChang"></u-tabs>
		<!-- #endif -->
		<!-- 类型 -->
		<view class="u-p-t-30">
			<view class="u-p-l-10 u-p-r-10" v-if="cateList.length > 0">
				<!-- #ifdef MP-BAIDU -->
				<fa-u-tabs
					:list="cateList"
					:is-scroll="true"
					bg-color="#f4f6f8"
					active-color="#000"
					:bar-width="barwidth"
					inactive-color="#000"
					:current="current"
					:active-item-style="{ backgroundColor: '#fff', borderTopLeftRadius: '6rpx', borderTopRightRadius: '6rpx', boxShadow: '0 0 10px rgba(0, 87, 142, 0.1)' }"
					:bar-style="{ backgroundColor: 'rgb(255 255 255 / 0)' }"
					@change="change"
				></fa-u-tabs>
				<!-- #endif -->
				<!-- #ifndef MP-BAIDU -->
				<u-tabs
					:list="cateList"
					:is-scroll="true"
					bg-color="#f4f6f8"
					active-color="#000"
					:bar-width="barwidth"
					inactive-color="#000"
					:current="current"
					:active-item-style="{ backgroundColor: '#fff', borderTopLeftRadius: '6rpx', borderTopRightRadius: '6rpx', boxShadow: '0 0 10px rgba(0, 87, 142, 0.1)' }"
					:bar-style="{ backgroundColor: 'rgb(255 255 255 / 0)' }"
					@change="change"
				></u-tabs>
				<!-- #endif -->
			</view>
			<!-- 问题列表 -->
			<view class="" v-if="!tIndex"><fa-question-item :isCard="false" :questionList="resultList"></fa-question-item></view>
			<!-- 文章列表 -->
			<view class="" v-else><fa-article-items :list="resultList" :isCard="false"></fa-article-items></view>
			<!-- 空数据 -->
			<wanl-empty style="padding:0;" v-if="isEmpty"></wanl-empty>
			<!-- 加载更多 -->
			<view class="u-p-t-30 u-p-b-30" v-if="!isEmpty"><u-loadmore bg-color="#f4f6f8" :status="has_more ? status : 'nomore'" /></view>
		</view>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
import { styleRest } from '@/common/fa.mixin.js';
export default {
	mixins: [styleRest],
	computed: {		
		questionCate() {
			if (!this.vuex_config.questionCate) {
				return [];
			}
			if (!this.vuex_isAdmin) {
				let len = this.vuex_config.questionCate.length;
				if (this.vuex_config.questionCate[len - 1].value == 'unsettled') {
					this.vuex_config.questionCate.pop();
				}
			}
			return this.vuex_config.questionCate;
		}
	},
	onLoad(e) {
		let query = this.$Route.query || e || {};
		this.keyword = query.keyword || '';
		this.cutCate();
		this.search();
	},
	watch: {
		keyword(newValue, oldValue) {
			this.showAction = Boolean(newValue);
		}
	},
	data() {
		return {
			showAction: false,
			keyword: '',
			barwidth: 40,
			current: 0,
			list: [
				{
					name: '问题',
					text: 'question'
				},
				{
					name: '文章',
					text: 'article'
				}
			],
			tIndex: 0,
			cateList: [],
			resultList: [],
			type: '',
			isEmpty: true,
			has_more: false,
			page: 1,
			status: 'loadmore',
			is_again: false
		};
	},
	methods: {
		search() {
			this.page = 1;
			this.is_again = true;
			if (this.vuex_config.searchtype == 'local') {
				//本地
				this.getSearchIndex();
			} else {
				//xunsearch
			}
		},
		change(index) {
			this.current = index;
			console.log(index);
			//重设Bar宽度
			this.barwidth = this.$util.strlen(this.cateList[index].name) * 30;
			this.type = this.cateList[index].value;
			this.search();
		},
		tChang(index) {
			this.tIndex = index;			
			this.cutCate();
			this.search();
		},
		//切换导航栏
		cutCate() {
			if (!this.tIndex) {
				this.cateList = this.questionCate;
			} else {
				this.cateList = this.vuex_config.articleCate;
			}
		},
		//搜索
		getSearchIndex: async function() {
			let res = await this.$api.getSearchIndex({
				module: this.list[this.tIndex].text,
				type: this.type,
				q: this.keyword,
				page: this.page
			});
			this.status = 'loadmore';
			if (!res.code) {
				this.$u.toast(res.msg);
				return;
			}
			if (this.is_again) {
				this.resultList = [];
				this.is_again = false; //避免数据未到的空白
			}
			res.data.data.map(this.setStyle);
			this.resultList = this.resultList.concat(res.data.data);			
			//分页简洁判断
			if(this.vuex_config.pagesimple.indexOf(this.list[this.tIndex].text)!=-1){
				this.has_more = res.data.has_more;
			}else{
				this.has_more = res.data.last_page>res.data.current_page;
			}			
			this.isEmpty = !this.resultList.length;
		},
		onReachBottom() {
			if (this.has_more) {
				this.status = 'loading';
				this.page++;
				this.getSearchIndex();
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f4f6f8;
}
</style>
